<template>
    <fieldset>
        <legend>按钮鉴权</legend>
        

        <legend>{{isLogin?'内容界面':'登入界面'}}</legend>
        
        <!-- 内容展示界面 -->

        <div class="content" v-if="isLogin">
            <h1>列表展示</h1>
            <button @click="isLogin=false">点击退出登录</button>
            <button @click="getList">点击获取列表数据</button>
            <h2>
                <img :src="userInfo.headimgurl" width="50" alt="">
                昵称:
                <a href="">{{userInfo.nickname}}</a>
            </h2>
            <ul>
                <li v-for="item in lists" :key="item.__Id">
                <b>{{item.name}}</b>
                <button v-has:read="permissionBtns">查看</button>
                <button v-has:edit="permissionBtns">修改</button>
                <button v-has:delet="permissionBtns">删除</button>
                <button v-has:add="permissionBtns">增加</button>
                </li>
            </ul>
        </div> 




        <div class="login" v-else>
            <h1>请登入</h1>
            <!-- 登录界面 -->
            <label for="username">用户名:</label>
            <input type="text" id="username" v-model="username">

            <br>

            <label for="password">密码:</label>
            <input type="text" v-model="password" @keydown.enter="login">

            <br>

            <button @click="login">登入</button>
        </div>


    </fieldset>
</template>

<script>

// 接口地址  
// 登入接口: http://chst.vip/users/login



// 请求方式:post
// 携带参数 username password

// 请求头: application/json


// 需求:
// 1.页面加载的时候,展示登入界面,登录成功之后,展示内容界面

// 2.登入成功的页面切换,登入失败的他是

// 3.在登入成功的页面,根据todos数据,展示列表

// 4.根据登入角色的权限,展示对应角色的按钮级权限

// 封装一个登入的请求方法

// 请求服务器的数据,需要携带token

// token 令牌 携带令牌才能请求数据,这个令牌有生效时间

// 请求的时候,携带在请求头里面 authorization

// 令牌token可以存到sessionStorage中

const loginApi = (params = {}) =>{
    return fetch ('http://chst.vip/users/login',{
        // 请求方式
        method:'post',
        // 请求头
        headers:{
        'content-type':'application/json'
        },
        // 携带的参数(上载的参数)
        body:JSON.stringify(params)
    })
    .then(body=>body.json())
    .catch(err => err.toString())
}

// 获取列表的请求

const getListApi =()=>{
    return fetch('http://chst.vip/students/getstulist?count=10',{
        headers:{
            'authorization':sessionStorage.getItem('user-token')
        }
    })
    .then(body=>body.json())
    .catch(err => err.toString())
   
}

// 声明全局的自定义指令,对按钮进行鉴权操作





export default {
    directives:{
                has:{
                    inserted(el,binding){
                        
                        // 按钮需要的权限 edit, 从指令参数获取
                        let role =binding.arg;
                        // 用户权限 [read,add] 从表达式里面获取
                        let userRole=binding.value;
                        //判断用户有没有按钮的权限
                        let hasRole = userRole.includes(role)
                        if(!hasRole){
                            // 没有权限那么就禁用当前的按钮
                            // 1.禁用
                            
                            el.disabled = true

                            // 2.直接不显示,移除
                            el.parentNode.removeChild(el)
                            
                        }

                    }
                }
            },
    data(){
        return{

           


      

            
            // 是否登入的状态
            isLogin:false,
            username:'',
            password:'',
            
            // userInfo 用户信息
            userInfo:{},

            // 权限按钮
            permissionBtns:[],

            // todos:[
            //     {
            //         id:1,
            //         todo:'写代码',
            //         isComplete:false
            //     }, 
            //     {
            //         id:1,
            //         todo:'写代码',
            //         isComplete:false
            //     },
            //     {
            //         id:1,
            //         todo:'写代码',
            //         isComplete:false
            //     },
            // ]

            lists:[

            ]
        }
    },
    methods:{

        // 使用 async和await来等待请求异步结果
          async login() {
              let res = await  loginApi({ username: this.username, password:this.password})
              console.log(res);

              if(res.state){
                
                // 登入成功

                this.isLogin = true;
                
                // 设置用户信息
                this.userInfo = res.userInfo;
                
                // 将用户的令牌存到本地
                sessionStorage.setItem('user-token',res.token)

                // 给permissionBtns赋值
                this.permissionBtns = res.permission.buttons;
              } else {
                alert(res.msg)
              }
            },
            
            // 获取列表
            getList(){
                getListApi()
                .then(res=>{
                    console.log(res);
                    if(res.state){
                        //请求成功
                        this.lists = res.data
                    }else {
                        alert(res.msg)
                    }
                })
            }

            // async getList(){
            //     let res = await getListApi()
            // }
        
    }
}
</script>

<style>
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

li {
    /* border: 1px solid deeppink; */
    margin: 10px;
    max-width: 500px;
}
</style>